<template>
	<div class="twoStageWindow">
		<div class="twoStageWindowTitle">
      <span>
        查看仪器
      </span>
      <span style="font-size:13px;margin-left:8px;"> {{detailData.name}}</span>

      <!-- tab切换按钮 -->
  		<div class="twoStageWindowClose"  >
  			<el-button size="mini" @click="close">取消</el-button>
  		</div>
  	</div>
  	<div class="containercontent" style="height:99%;padding:10px;">
		<el-tabs type="card" style="height: 100%;overflow-y:auto;"  class="equipTab typeOfCard">

		  <el-tab-pane label="基础信息"><detail-basic :detailData="detailData" ref="detailBasicRef"></detail-basic></el-tab-pane>
		  <el-tab-pane label="仪器接口"><port :portData="detailData" ref="portAddRef"></port></el-tab-pane>
		  <el-tab-pane label="仪器维护计划"> <maintain :maintainData="detailData"></maintain></el-tab-pane>
		  <el-tab-pane label="测试检查项"><before-check :beforeCheckData="detailData" flag="look"></before-check></el-tab-pane>
		  <!--<el-tab-pane label="测试后检查"><use-check :useCheckData="detailData" flag="look"></use-check></el-tab-pane>-->
		  <el-tab-pane label="保养记录"><upkeep-record :upkeepRecordData="detailData" :showButton='showObj' flag="look"></upkeep-record></el-tab-pane>
		  <el-tab-pane label="检定校准记录"><check-record :checkRecordData="detailData" flag="look"></check-record></el-tab-pane>
		  <el-tab-pane label="期间核查记录"><periodcheck-record :periodCheckRecordData="detailData" flag="look"></periodcheck-record></el-tab-pane>
		  <!--<el-tab-pane label="维护记录"><upkeep-record :upkeepRecordData="detailData" :showButton='showObj' flag="look"></upkeep-record></el-tab-pane>-->

		  <el-tab-pane label="维修记录"><maintain-record :maintainRecordData="detailData" :showButton='showObj' ></maintain-record></el-tab-pane>
		  <el-tab-pane label="使用记录"><use-record :useRecordData="detailData"></use-record></el-tab-pane>
		  <el-tab-pane label="校准曲线"><calibration-curve :calibrationData="detailData"></calibration-curve></el-tab-pane>
		  <el-tab-pane label="仪器文档"><documents :editData="detailData" flag="look"></documents></el-tab-pane>
		</el-tabs>



  	</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import detailBasic from './detailDialogPage/detailBasic' //基础信息
	import upkeepRecord from './detailDialogPage/upKeepRecord' //保养记录
	import checkRecord from './detailDialogPage/checkRecord' //检定校准记录
	import periodcheckRecord from './detailDialogPage/periodcheckRecord' //期间核查记录

	import maintain from './detailDialogPage/maintain' //仪器维护
	import maintainRecord from './detailDialogPage/maintainRecord' //维修记录
	import port from './detailDialogPage/Port' //仪器接口
	import documents from './editDialogPage/Document' //仪器文档
	import useRecord from './detailDialogPage/useRecord' //使用记录
	import calibrationCurve from './detailDialogPage/calibrationCurve' //校准曲线
	// import useCheck from './editDialogPage/useCheck' //仪器使用检查项
	import beforeCheck from './detailDialogPage/beforeCheck' //使用前检查
	export default {
		components:{
			detailBasic,
			upkeepRecord,
			checkRecord,
			periodcheckRecord,
			maintain,
			maintainRecord,
			port,
			documents,
			useRecord,
			calibrationCurve,
			// useCheck,
			beforeCheck,
	  },
	  props:['detailData','showTabIndex'],
		data(){
			return {
				showObj:{add:false},
				tabArr:[
				{name:'基础信息',tab:'basic'},
				{name:'仪器接口',tab:'port'},
				{name:'仪器维护计划',tab:'maintain'},
				{name:'测试检查项',tab:'beforeCheck'},
				// {name:'测试后检查项',tab:'useCheck'},
				{name:'保养记录',tab:'upKeepRecord'},
				{name:'检定校准记录',tab:'checkRecord'},
				{name:'期间核查记录',tab:'periodCheckRecord'},
				{name:'维修记录',tab:'maintainRecord'},
				{name:'使用记录',tab:'useRecord'},
				{name:'校准曲线',tab:'calibrationCurve'},
				{name:'仪器文档',tab:'document'},
				],
				nowTab:'',
				tableHeightD: ((window.innerHeight - 300) / 3 - 25),
			}
		},
		computed:{
					dealTabArr(){

			   			let showTabs = [];
			   			for(let i of this.showTabIndex){
			   				showTabs.push(this.tabArr[i])
			   			}
			 			return showTabs
			 		},
		},
		mounted(){
			this.nowTab = 'basic'
		},
		methods:{
			close(){
				this.$parent.detailShow=false;
				this.$parent.init()
			},
			tabDivMinHeight(){
	      return (window.innerHeight - 560)
	    },
	    handleSizeChange(){},
	    handleCurrentChange(){},
	    tabDivHeight(){
	      return (window.innerHeight - 460)
	    },
		}
	}
</script>

<style scoped>
	.instrument-add{
		position: static;
	}
	.twoStageWindowTitle{
      position: static;
  }
	.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
	.activeTab{
	  color: #409eff;
	}
	.infoitem {
    width: calc(100%/2);
    padding-right: 20px;
}
	.separaterow{
	  margin-top: 5px;
	}
	.informationItem {
	    width: calc(100% - 113px);
	    float: right;
	}
</style>
<style>
  .equipTab .el-tabs__header{
      margin: 0 0 5px !important;
  }
	.equipTab .el-tabs__content{
		height: calc(99% - 35px);
	}
	.equipTab .el-tabs__content .el-tab-pane{
		height: 100%;
	}
</style>
